<!-- 
 * 角色成员设置抽屉组件
 * @author: 
 * @since: 2022-05-07
 * index.vue
-->
<template>
  <div class="offsideDrawer">
    <el-drawer v-model="isShowDrawer" title="" :before-close="closedDrawer">
      <template #title>
        <div class="drawer-title">
          <div class="title-icon"></div>
          <div class="title-text">
            <span>角色成员设置</span>
          </div>
        </div>
      </template>
      <template #default>
        <div class="drawer-content">
          <div class="tip">
            <svg-icon name="tishi" color="#FFB018" size="16px"></svg-icon>
            <span class="text">用户加入到角色后，将拥有该角色的所有权限</span>
          </div>
          <el-form :model="form">
            <el-form-item label="角色名称：" prop="rolename" :required="true" class="noRules formItemCss">
              <el-input v-model="form.rolename" disabled />
            </el-form-item>
            <el-form-item label="选择用户：" prop="userName" class="formItemCss">
              <el-input v-model="form.userName" placeholder="请输入用户名">
                <template #suffix>
                  <svg-icon name="sousuo" color="#AFB9D2" size="20px" @click="search"></svg-icon>
                </template>
              </el-input>
            </el-form-item>
            <div class="tableCom"><TableCom :tableHeader="state.tableHeader" :tableData="state.tableData" :pagination="state.pagination" :loading="loading" :isShowTableBtn="false" @getCurrentChange="getCurrentChange" @getSizeChange="getSizeChange" @getSelectChange="getSelectChange" :roleId="data.id" ref="tableCom" :isShowGrooveHandleCol="false" :isShowLogicHandleCol="false"></TableCom></div>
          </el-form>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button type="primary" size="mini" style="width: 100px" @click="save">提交</el-button>
          <el-button size="mini" style="width: 100px" @click="closedDrawer">取消</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { reactive, ref, defineProps, defineEmits, onMounted, nextTick } from 'vue'
import { getUserListApi } from '@/api/interface/userManage.js'
import { roleAddUserApi } from '@/api/interface/role.js'
import { ElMessage } from 'element-plus'
import { successHandle } from '@/utils/common.js'


const props = defineProps({
  isShowDrawer: {//是否展开角色抽屉
    type: Boolean,
    default: false
  },
  data: {//row数据
    Object,
    default: () => { }
  }
})
const emits = defineEmits(['close', 'refresh'])

const form = reactive({
  rolename: '',//角色名称
  userName: '',//用户
})

const loading = ref(true)
const tableCom = ref(null)

const state = reactive({
  tableData: [],
  tableHeader: [
    {
      label: '用户名',
      prop: "userName",
    },
    {
      label: '姓名',
      prop: "realName",
    },
    {
      label: '手机号码',
      prop: "mobile",
    },
  ],
  pagination: {//分页
    currentPage: 1,
    size: 10,
    total: 0,
  },
  userNames: [],//用户名称数组

})
onMounted(() => {
  if (props.isShowDrawer) {
    for (let key in form) {
      form[key] = props.data[key]
    }
  }
  getUserList();
})



const getUserList = async () => {
  loading.value = true
  const params = {
    ipi: state.pagination.currentPage,
    ips: state.pagination.size,
    userName: form.userName,
  }

  await getUserListApi(params).then((res) => {
    const { status, data } = res
    if (status === 200) {
      state.tableData = data.result
      state.pagination.currentPage = data.pageNum
      state.pagination.size = data.pageSize
      state.pagination.total = data.total
      loading.value = false
      nextTick(() => {
        tableCom.value.returnSelect()
      })
    }

  })

}


//关闭抽屉 清空数据
const closedDrawer = () => {
  emits('close')
}

//保存
const save = () => {
  if (state.userNames.length > 0) {
    const params = {
      roleId: props.data.id,
      userNames: state.userNames
    }
    roleAddUserApi(params).then(res => {
      const { status } = res
      if (status === 200) {
        successHandle(res)
        getUserList()
      }

    })


  } else {
    ElMessage({
      message: '至少选择一个用户',
      type: 'warning',
    })


  }
}

//搜索
const search = () => {
  getUserList();
}

//点击当前页
const getCurrentChange = (val) => {
  state.pagination.currentPage = val;
  getUserList();
}

//点击条数
const getSizeChange = (val) => {
  state.pagination.size = val;
  getUserList();
}

//选择
const getSelectChange = (data) => {
  state.userNames = data.map(item => item.userName)
}


</script>

<style lang="scss" scoped>
.drawer-content {
  margin-top: 12px;
}
.tip {
  color: #ffb018;
  font-size: 12px;
  background: rgba(255, 176, 24, 0.1);
  border-radius: 4px;
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  box-sizing: border-box;
  margin-bottom: 12px;
  .text {
    margin-left: 9px;
  }
}
.tableCom {
  :deep(.table-container) {
    padding: 0 !important;
  }
}

.formItemCss {
  margin-right: 0;
}
</style>
